/**
* 功能描述: 功能复选按钮组demo
* @author 崔孝楠
* @date 2022/9/30 8:52
* @version 1.0
*/
<template>
  <div>
    <div class="yw-check-button-group">
      <label class="yw-check-button-wrapper">
        <span class="yw-check-button yw-check-button-checked">
          <input type="checkbox" class="yw-check-button-input" value="a">
          <span class="yw-check-button-inner"></span>
        </span>
        <span>Hangzhou</span>
      </label>
      <label class="yw-check-button-wrapper">
        <span class="yw-check-button">
          <input type="checkbox" class="yw-check-button-input" value="b">
          <span class="yw-check-button-inner"></span>
        </span>
        <span>Shanghai</span>
      </label>
      <label class="yw-check-button-wrapper">
        <span class="yw-check-button">
          <input type="checkbox" class="yw-check-button-input" value="c">
          <span class="yw-check-button-inner"></span>
        </span>
        <span>Beijing</span>
      </label>
      <label class="yw-check-button-wrapper">
        <span class="yw-check-button">
          <input type="checkbox" class="yw-check-button-input" value="d">
          <span class="yw-check-button-inner"></span>
        </span><span>Chengdu</span>
      </label>
    </div>
    <div class="yw-check-button-group">
      <label class="yw-check-button-wrapper yw-check-button-wrapper-checked">
        <span class="yw-check-button yw-check-button-checked">
          <input type="checkbox" class="yw-check-button-input" value="a">
        <span class="yw-check-button-inner"></span>
      </span>
        <span>Hangzhou</span>
      </label>
      <label class="yw-check-button-wrapper yw-check-button-wrapper-disabled">
        <span class="yw-check-button yw-check-button-disabled">
          <input type="checkbox" disabled="" class="yw-check-button-input" value="b">
          <span class="yw-check-button-inner"></span>
        </span>
        <span>Shanghai</span>
      </label>
      <label class="yw-check-button-wrapper">
        <span class="yw-check-button">
          <input type="checkbox" class="yw-check-button-input" value="c">
          <span class="yw-check-button-inner"></span>
        </span><span>Beijing</span>
      </label>
      <label class="yw-check-button-wrapper">
        <span class="yw-check-button">
          <input type="checkbox" class="yw-check-button-input" value="d">
          <span class="yw-check-button-inner"></span>
        </span>
        <span>Chengdu</span>
      </label>
    </div>
    <div class="yw-check-button-group">
      <label class="yw-check-button-wrapper yw-check-button-wrapper-checked yw-check-button-wrapper-disabled"><span class="yw-check-button yw-check-button-checked yw-check-button-disabled">
        <input type="checkbox" disabled="" class="yw-check-button-input" value="a">
        <span class="yw-check-button-inner"></span>
      </span>
        <span>Hangzhou</span>
      </label>
      <label class="yw-check-button-wrapper yw-check-button-wrapper-disabled">
        <span class="yw-check-button yw-check-button-disabled">
          <input type="checkbox" disabled="" class="yw-check-button-input" value="b">
          <span class="yw-check-button-inner"></span>
        </span><span>Shanghai</span>
      </label>
      <label class="yw-check-button-wrapper yw-check-button-wrapper-disabled">
        <span class="yw-check-button yw-check-button-disabled">
          <input type="checkbox" disabled="" class="yw-check-button-input" value="c">
          <span class="yw-check-button-inner"></span>
        </span>
        <span>Beijing</span>
      </label>
      <label class="yw-check-button-wrapper yw-check-button-wrapper-disabled">
        <span class="yw-check-button yw-check-button-disabled">
          <input type="checkbox" disabled="" class="yw-check-button-input" value="d">
          <span class="yw-check-button-inner"></span>
        </span>
        <span>Chengdu</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>
.yw-check-button-group {
  margin: 10px;
}
</style>
